<!--
 * @Description: 百度地图
 * @Author: huacong
 * @Date: 2020-07-03 14:58:39
 * @LastEditTime: 2020-07-06 13:37:25
 * @LastEditors: huacong
--> 
<template lang="pug">
  #mapBox(:style="{width: '100%',height:height + 'px'}")
</template>
<script>
import { insertMap } from '@/utils/util'
import mapMarkerIcon1 from '@/assets/normal-jg.png'
import mapMarkerIcon2 from '@/assets/mapMarker.png'
import mapMarkerIcon3 from '@/assets/mapMarker_2.png'
import { mapGetters} from 'vuex'

let mapObj = null

export default {
  name: 'BaiduMap',
  props: {
    mapStyle: { // 地图模式，normal,midnight,light,dark,grassgreen,googlelite
      type: String,
      default: 'normal'
    },
    mapZoom: {
      type: Number,
      default: 14
    },
    height: { // 地图高度
      type: Number,
      default: 720
    },
    map: {
      type: Object,
      default: () => {}
    },
    markerOptions: { // 标注弹窗配置
      type: Object,
      default: () => {}
    },
    contentfn: { // 标注弹窗内容渲染方法
      type: Function,
    },
    markerfn: {
      type: Function,
    }
  },
  data() {
    return {
      mapMarkerIcon1,
      mapMarkerIcon2,
      mapMarkerIcon3
    }
  },
  watch: {
    map: {
      handler(val){
        if (val) {
          this.createMap()
        }
      },
      deep: true
    }
  },
  computed: {
    ...mapGetters(['sysParams'])
  },
  mounted () {
    if (this.map.mapMarkers && this.map.mapMarkers.length > 0){
      this.createMap()
    }
  },
  methods: {
    initMap () {
      const that = this
      const {sysParams:{map_url} } = this
      if (map_url){
        // 向文本中插入百度地图js
        insertMap(map_url).then(() => {
          // 百度地图绘制
          that.createMap()
        })
      }
    },
    createMap(){
      const {map: { center}, sysParams,mapStyle, mapZoom} = this
      try {
        const BMap = window.BMap
        if (!BMap){
          this.initMap()
          return
        }
        // 百度地图API功能
        mapObj = new BMap.Map("mapBox",{minZoom:4,maxZoom:16}); // 创建Map实例
        mapObj.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        mapObj.addControl(new BMap.NavigationControl()); //缩放按钮
        mapObj.setMapStyle({
          style : mapStyle
        }) //黑夜模式   
        mapObj.centerAndZoom(new BMap.Point(center ? center.lng : sysParams.map_longitude, center ? center.lat : sysParams.map_latitude), mapZoom)
        this.createMapMarker()
      } catch (e) {
        console.log(e)
      }
    },
    createMapMarker () {
      const BMap = window.BMap
      const that = this
      const { contentfn, markerfn, map: {mapMarkers},markerOptions } = this
      if (mapMarkers && mapMarkers.length > 0) {
        mapMarkers.map((item, index) => {
          const point = new BMap.Point(item.longitude,item.latitude) // 标注点定位
          // 创建标注对象并添加到地图
          const iconMarker = markerfn ? that['mapMarkerIcon' + markerfn(item)] : that.mapMarkerIcon1
          const icon = new BMap.Icon(iconMarker,new BMap.Size(30, 44)) // 标注点自定义图标
          const marker = new BMap.Marker(point, {icon})
          const content = contentfn(item)
          var infoWindow = new BMap.InfoWindow(content, markerOptions);
          marker.addEventListener("click",function() {
            this.openInfoWindow(infoWindow)
          })
          mapObj.addOverlay(marker)
          if (index === mapMarkers.length -1){
            mapObj.centerAndZoom(new BMap.Point(item.longitude,item.latitude), 14)
          }
        })
      }
    },
  }
}
</script>
